<template>
  <c-main-template
    minHeight="auto"
    :isBreadcrumb="false"
    class="mt-lg ml-lg mr-lg"
  >
    <el-row :gutter="24" class="pd-lg">
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">进口商名称：</div>
          <el-input
            size="large"
            placeholder="请输入进口商名称"
            v-model="querys.buyerName"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">车辆信息：</div>
          <el-input
            size="large"
            placeholder="请输入车辆信息"
            v-model="querys.carInfo"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">创建时间：</div>
          <el-date-picker
            v-model="querys.time"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="large"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="3">
        <div class="flex-x-end">
          <el-button size="large" @click="handleReset">重 置</el-button>
          <el-button size="large" type="primary" @click="handleSelect"
            >查 询</el-button
          >
        </div>
      </el-col>
      <el-col :span="7" class="mt-lg">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">订单号：</div>
          <el-input
            size="large"
            placeholder="请输入订单号"
            v-model="querys.orderId"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
    </el-row>
  </c-main-template>
  <c-main-template
    v-loading="loading"
    class="mg-lg"
    minHeight="auto"
    title="发货申请"
    :isBreadcrumb="false"
  >
    <template #operate>
      <el-button size="large" type="primary" @click="handleDeliveryRequest"
        >创建发货单</el-button
      >
    </template>
    <c-table-template :data="tableData">
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column label="发货单" prop="id" align="center" width="200" />
      <el-table-column
        label="车辆信息"
        prop="productInfo"
        align="center"
        min-width="250"
      />
      <el-table-column
        label="订单数量（台）"
        prop="productAmount"
        align="center"
        width="150"
      />

      <el-table-column
        label="进口商名称"
        prop="buyerName"
        align="center"
        width="200"
      />
      <el-table-column
        label="订单号"
        prop="orderId"
        align="center"
        width="200"
      />
      <el-table-column
        label="起始港"
        prop="startHarborName"
        align="center"
        width="150"
      />
      <el-table-column
        label="目的地"
        prop="endHarborName"
        align="center"
        width="150"
      />                                                      
      <el-table-column label="下单时间" align="left" width="200">
        <template #default="scope">
          {{ filters.dateYMDHMSFormat(scope.row.timeCreate) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="" align="center" width="150">
        <template #default="scope">
          {{ getStatusLabel(deliveryType, scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150" fixed="right">
        <template #default="scope">
          <el-button
            v-if="scope.row.status === 2"
            link
            type="primary"
            size="small"
            @click="handleReapply(scope.row)"
          >
            <span>重新申请</span>
          </el-button>
          <el-button
            v-else
            link
            type="primary"
            size="small"
            @click="handleDetails(scope.row)"
          >
            <span>查看发货单</span>
          </el-button>
        </template>
      </el-table-column>
    </c-table-template>
    <div class="flex-x-end pd-20">
      <c-page-template
        :total="total"
        :querys="querys"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </c-main-template>
  <c-deliver-goods ref="cDeliverGoodsRefs" @change="tableList"/>
  <c-deliver-goods-details ref="cDeliverGoodsDetailsRefs" />
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useBasicsTable } from "@/hooks/useTable.js";
import { ElMessageBox, ElMessage } from "element-plus";
import { deliveryType, getStatusLabel } from "@/utils/status.js";
import cDeliverGoods from "./components/DeliverGoods.vue";
import cDeliverGoodsDetails from "./components/DeliverGoodsDetails.vue";
const { proxy } = getCurrentInstance();
const cDeliverGoodsRefs = ref();
const cDeliverGoodsDetailsRefs = ref();
const handleDeliveryRequest = () => {
  cDeliverGoodsRefs.value.handleOpen();
};

const handleReapply = (item) => {
  cDeliverGoodsRefs.value.handleOpen(item);
};
const handleDetails = (item) => {
  cDeliverGoodsDetailsRefs.value.handleOpen(item);
};
const {
  querys,
  tableData,
  total,
  loading,
  tableList,
  handleSelect,
  handleSizeChange,
  handleCurrentChange,
  handleReset,
} = useBasicsTable({
  url: "/sellerDeliveryList/sellerPage",
  getParams: () => {
    const params = {};
    if (querys.value.time && querys.value.time.length > 0) {
      params.startTime = querys.value.time[0];
      params.endTime = querys.value.time[1];
      params.time = null;
    }
    return params;
  },
});
</script>